<template>
  <div>
    <div class="detail">
      <div class="wrapper">
        <div class="aside-button">
          <div class="button-wrap">
            <div class="button-radius" @click="FabulousAdd" :class="{AddColor: FabulousColor}">
              <i class="iconfont">&#xe600;</i>
            </div>
            <div class="button-info">
              {{ Fabulous }}赞
            </div>
          </div>
          <div class="button-wrap">
            <div class="button-radius">
              <i class="iconfont">&#xe601;</i>
            </div>
            <div class="button-info">
              赞赏
            </div>
          </div>
        </div>
        <div class="container">
          <el-row type="flex" justify="space-between">
            <el-col :xs="17" :sm="17" :md="17" :lg="17" :xl="17">
              <div class="content">
                <section class="article">
                  <h1 class="article-title">CSS的学习记录(一)</h1>
                  <div class="flex-c user-info">
                    <a href="" class="user-img">
                      <img src="../../public/author/author1.webp" alt="">
                    </a>
                    <div class="user-message">
                      <a href="" class="user-name">{{userMessage.nickname}}</a>
                      <button class="follow-button">关注</button>
                      <div class="user-other flex-c">
                        <i class="iconfont">&#xe6dd;1</i>
                        <time>2020.02.25 00:01:18</time>
                        <span>字数 332</span>
                        <span>阅读 392</span>
                      </div>
                    </div>
                  </div>
                  <mavon-editor :value="value"
                                :subfield="false"
                                :defaultOpen="'preview'"
                                :toolbarsFlag="false"
                                :editable="false"
                                :scrollStyle="true"
                                :boxShadow="false"
                                :previewBackground="'#ffffff'"
                                :ishljs="true"
                  />
                </section>
                <div class="article-footer">
                  <div class="top flex-c">
                    <div class="flex-c">
                      <div class="flex-c">
                        <div class="button-radius" @click="FabulousAdd" :class="{AddColor: FabulousColor}">
                          <i class="iconfont">&#xe600;</i>
                        </div>
                        <span class="info">{{ Fabulous }}人点赞></span>
                      </div>
                      <div>
                        <div class="button-radius">
                          <i class="iconfont">&#xe639;</i>
                        </div>
                      </div>
                    </div>
                    <div class="top-right flex-c">
                      <i class="iconfont">&#xe630;</i>
                      <span class="info">移动端适配</span>
                      <div class="button-radius">
                        <i class="iconfont">&#xe61e;</i>
                      </div>
                    </div>
                  </div>
                  <div class="hr"></div>
                  <div class="down">
                    <div class="info">
                      "小礼物走一走，来简书关注我"
                    </div>
                    <button>赞赏支持</button>
                    <div class="info">
                      还没有人赞赏，支持一下
                    </div>
                  </div>
                  <div class="author flex-c">
                    <div class="user-info flex-c">
                      <a href="" class="user-img">
                        <img src="./../../public/author/author1.webp" alt="">
                      </a>
                      <div class="user-message">
                        <a class="user-name">
                          {{userMessage.nickname}}
                        </a>
                        <div class="user-other">
                          <span>总资产14 (约1.10元)</span>
                          <span>共写了3.8W字</span>
                          <span>获得131个赞</span>
                          <span>共21个粉丝</span>
                        </div>
                      </div>
                    </div>
                    <button class="follow-button">关注</button>
                  </div>
                </div>
              </div>
              <div class="article-commend">
                <div class="commend flex-c">
                  <a href="" class="user-img">
                    <img src="../../public/author/author1.webp" alt="">
                  </a>
                  <div class="commend-area">
                    <textarea placeholder="写下你的评论..."></textarea>
                  </div>
                </div>
                <div class="all-commend">
                  <div class="flex-c title">
                    <div class="title-left">
                      <span>全部评论</span>
                      <span>6</span>
                      <span class="only-author">只看作者</span>
                    </div>
                    <div class="title-right flex-c">
                      <div class="time-sort active">按时间正序</div>
                      <div class="time-sort">按时间倒序</div>
                    </div>
                  </div>
                  <div class="content" style="display: flex" v-for="common in comments" :key="common.id">
                    <div class="user-info">
                      <a href="" class="user-img">
                        <img src="../../public/author/author1.webp" alt="">
                      </a>
                    </div>
                    <div class="user-info flex-g1">
                      <div class="user-message">
                        <div class="user-name">
                          {{common.user.nickname}}
                        </div>
                        <div class="user-other">
                          {{common.created_at}}
                        </div>
                      </div>
                      <div class="commend-content" v-html="common.compiled_content"></div>
                      <div class="other">
                        <i class="iconfont">&#xe600; 赞 </i>
                        <i class="iconfont">&#xe600; 评论 </i>
                      </div>
                      <div class="hr"></div>
                      <div class="reply" v-show="common.children.length" v-for="children in common.children" :key="children.id">
                        <div class="user-info flex-c">
                          <a href="" class="user-img">
                            <img src="../../public/author/author1.webp" alt="">
                          </a>
                          <div class="user-message">
                            <div class="user-name">
                              {{children.user.nickname}}
                            </div>
                            <div class="user-other">
                              {{children.created_at}}
                            </div>
                          </div>
                        </div>
                        <div class="commend-content" v-html="children.compiled_content"></div>
                        <div class="other">
                          <i class="iconfont">&#xe6a3; 回复 </i>
                        </div>
                        <div class="hr"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="classification">
                <div class="title flex-c">
                  <div class="title-left">
                    <span>推荐阅读</span>
                  </div>
                  <div class="title-right">
                    <a href="/">
                      <span>更多精彩内容 > </span>
                    </a>
                  </div>
                </div>
                <ArticleList :article-list="articleList"></ArticleList>
              </div>
            </el-col>
            <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
              <aside class="aside">
                <div class="author-aside">
                  <div class="user-info flex-c">
                    <a href="" class="user-img">
                      <img src="../../public/author/author1.webp" alt="">
                    </a>
                    <button class="follow-button">关注</button>
                    <div class="flex-c">
                      <div class="user-message">
                        <div class="user-name">{{userMessage.nickname}}</div>
                        <div class="user-other">总资产42 (约3.44元)</div>
                      </div>
                    </div>
                  </div>
                  <div class="hr"></div>
                  <div class="aside-read" v-for="item in userNode" :key="item.id">
                    <div class="aside-read-title">
                      <a href="">{{item.title}}</a>
                    </div>
                    <div class="read-number">
                      阅读 {{item.view_count}}
                    </div>
                  </div>
                </div>
                <div class="recommend-read" :class="{isFixed:isfixed}">
                  <div class="title">
                    推荐阅读
                  </div>
                  <div class="aside-read" v-for="item in asideList" :key="item.id">
                    <div class="aside-read-title">
                      <a href="">{{item.title}}</a>
                    </div>
                    <div class="read-number">
                      阅读 {{item.views_count}}
                    </div>
                  </div>
                </div>
              </aside>
            </el-col>
          </el-row>
        </div>
      </div>
      <footer class="bottom-commend">
        <div class="container flex-c">
          <div class="text">
            <textarea class="text-content" placeholder="写下你的评论..."></textarea>
          </div>
          <div class="other flex-c">
            <i class="iconfont">&#xe660;</i>
            <span>评论</span>
            <i class="iconfont">&#xe600;</i>
            <span>赞赏</span>
            <i class="iconfont" style="font-size: 14px">&#xe61e;</i>
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>
<script>
import ArticleList from '../components/ArticleList'
export default {
  name: 'Detail',
  data () {
    return {
      value: '',
      articleList: [],
      title: '',
      Fabulous: 0,
      FabulousColor: false,
      asideList: [],
      userMessage: {},
      userNode: [],
      isfixed: false,
      comments: []
    }
  },
  watch: {
    // value: function (a) {
    //   console.log(a)
    // }
  },
  components: { // 模板加载
    ArticleList
  },
  computed: { // 计算属性

  },
  mounted () { // 挂载
    this.getContent()
    this.getCommon()
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: { // 方法
    // saveMavon (value, render) {
    //   console.log('this is render' + render)
    //   console.log('this is value' + value)
    // },
    getContent () {
      this.axios.get('api/detail.json').then((res) => {
        this.value = res.content
        this.articleList = res.recommendList
        this.title = res.title
        this.Fabulous = res.Fabulous
        this.asideList = res.asideList
        this.userMessage = res.user
        this.userNode = res.userNode
      })
    },
    getCommon () {
      this.axios.get('api/common.json').then((res) => {
        this.comments = res.comments
        // console.log(this.comments)
      })
    },
    FabulousAdd () {
      if (!this.FabulousColor) {
        this.Fabulous++
        this.FabulousColor = true
      } else {
        this.Fabulous--
        this.FabulousColor = false
      }
    },
    handleScroll () {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.isfixed = scrollTop > 280
    }
  }
}
</script>

<style lang="scss">
  .detail {
    .wrapper {
      background-color: #f9f9f9;
      padding-bottom: 50px;
      .AddColor{
        background-color: #ea6f5a;
        i{
          color: #eeeeee;
        }
      }
      .aside-button {
        position: fixed;
        top: 216px;
        left: calc((100vw - 1000px) / 2 - 78px);

        .button-wrap {
          text-align: center;
          margin-bottom: 15px;
          .button-info {
            font-size: 14px;
            color: #969696;
            margin-top: 10px;
          }
        }
      }
      .container {
        width: 1032px;
        padding-bottom: 25px;
        .hr {
          width: 100%;
          height: 1px;
          margin: 16px 0;
          background-color: #eeeeee;
        }
        .follow-button {
          background-color: #fff;
          color: #ea6f5a;
          border: 1px solid #ea6f5a;
          padding: 2px 12px;
          font-size: 12px;
          border-radius: 20px;
        }
        .content, .article-commend, .classification{
          margin-top: 10px;
          padding: 24px;
          background-color: #fff;
        }
        .title{
          justify-content: space-between;
          margin-bottom: 16px;
          padding-left: 12px;
          border-left: 4px solid #ec7259;
          font-size: 18px;
          font-weight: 500;
          .title-left{
            span:nth-child(2){
              font-size: 14px;
              margin-left: 6px;
              margin-right: 15px;
            }
            .only-author{
              font-size: 12px;
              color: #969696;
              padding: 2px 8px;
              border: 1px solid #eee;
              border-radius: 16px;
              cursor: pointer
            }
          }
          .title-right{
            .time-sort{
              font-size: 14px;
              color: #969696;
              margin-left: 8px;
              user-select: none;
              cursor: pointer;
              &.active{
                color: #333333;
              }
            }
          }
        }
        .content {
          .article {
            .markdown-body {
              border: none !important;
            }
            .v-show-content {
              padding: 0 !important;
            }
            .article-title {
              font-size: 30px;
              font-weight: 700;
              word-break: break-word;
            }
            .user-info {
              margin: 15px 0 0;
              justify-content: start;
              .user-message {
                .user-other {
                  .iconfont {
                    font-size: 13px;
                    color: #ea6f5a;
                    vertical-align: center;
                  }
                  time, .iconfont, span {
                    margin-right: 10px;
                  }
                }
              }
            }
          }
          .article-footer {
            .top {
              color: #969696;
              justify-content: space-between;

              span {
                font-size: 14px;
              }

              .info {
                margin: 0 10px;
              }

              .flex-c {
                .button-radius {
                  width: 40px;
                  height: 40px;
                  line-height: 40px;
                  border: 1px solid #eee;
                }
              }
            }
            .down {
              text-align: center;
              margin: 40px 0 32px;

              .info {
                font-size: 16px;
                font-weight: 500;
              }

              button {
                color: #fff;
                background-color: #ec7259;
                border-color: #ec7259;
                font-size: 16px;
                padding: 8px 16px;
                border-radius: 50px;
                margin: 16px 0 24px;
              }
            }
            .author {
              justify-content: space-between;
              background-color: #fafafa;
              border-radius: 4px;
              padding: 12px 16px;
              .user-other {
                span {
                  font-size: 14px;
                  margin-right: 10px;
                }
              }
            }
          }
        }
        .article-commend{
          .commend{
            align-items: normal;
            .commend-area{
              flex-grow: 1;
              margin-bottom: 48px;
              textarea{
                box-sizing: border-box;
                padding: 12px 16px;
                width: 100%;
                height: 90px;
                font-size: 13px;
                border: 1px solid #eee;
                border-radius: 4px;
                background-color: #fafafa;
                resize: none;
                display: inline-block;
                vertical-align: top;
                outline-style: none;
              }
            }
          }
          .content {
            .commend-content{
              margin: 10px 0;
              font-size: 16px;
              line-height: 1.5;
              word-break: break-word;
            }
            .other{
              color: #b0b0b0;
              .iconfont{
                margin-right: 16px;
                cursor: pointer;
              }
            }
          }
        }
        .classification{
          margin-bottom: 10px;
          .title{
            margin-bottom: 0;
          }
          .title-right{
            font-size: 14px;
            cursor: pointer;
          }
        }

        .aside{
          margin-top: 10px;
          margin-left: 10px;
        }
        .author-aside, .recommend-read{
          margin-top: 10px;
          margin-left: 10px;
          padding: 14px;
          background-color: #fff;
          position: relative;
          .aside-read{
            margin-bottom: 12px;
            .aside-read-title{
              font-size: 14px;
              line-height: 22px;
              margin-bottom: 4px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              a:hover{
                text-decoration: underline;
              }
            }
            .read-number{
              font-size: 12px;
              color: #969696;
            }
          }
        }
        .author-aside{
          .follow-button{
            position: absolute;
            right: 16px;
            top: 20px;
          }
        }
        .recommend-read{
          &.isFixed{
            position: fixed;
            top: 5px;
            width: 253px;
          }
        }
      }
    }
    .bottom-commend{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
      box-shadow: 0 -2px 10px rgba(0,0,0,.05);
      z-index: 999999;
      .container{
        width: 1032px;
        padding: 10px 0;
        .text{
          .text-content{
            outline: none;
            box-sizing: border-box;
            width: 400px;
            height: 35px;
            font-size: inherit;
            resize: none;
            margin-right: 16px;
            padding: 8px 18px;
            border-radius: 18px;
            background-color: #f2f2f2;
            border: none;
          }
        }
        .other{
          font-size: 14px;
          cursor: pointer;
          color: #969696;
          span{
            margin-right: 20px;
            font-size: 14px;
            margin-left: 6px;
          }
        }
      }
    }
  }

</style>
